<template>
  <div class="page-not-found">
    <img class="image-404" src="@/assets/images/common/404.png" alt="找不到页面" />
    <a-space class="action-box">
      <a-button style="width: 120px" size="large" @click="back" shape="round" type="primary">
        返回
      </a-button>
      <a-button style="width: 120px" size="large" @click="backHome" shape="round">
        返回首页
      </a-button>
    </a-space>
  </div>
</template>

<script setup>
defineOptions({
  name: 'NotFound',
})

const $router = useRouter()

function back() {
  $router.back()
}

function backHome() {
  $router.replace({
    path: '/',
  })
}
</script>

<style scoped lang="scss">
.page-not-found {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;

  .image-404 {
    width: 50%;
    height: 50%;
    object-fit: contain;
  }
}
</style>
